<template>
    <div class="padding20">
        <!--列表页-->
        <div v-show="showList">
            <!--条件查询-->
            <el-form :model="queryParam" label-position="left" size="small">
                <el-row :gutter="50" justify="start">
                    <el-col :xs="12" :sm="7">
                        <el-form-item label="菜单名:" label-width="60px">
                            <el-input v-model="queryParam.title" placeholder="菜单名" @keyup.enter.native="selectPage"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="7">
                        <el-form-item label="菜单路由:" label-width="80px">
                            <el-input v-model="queryParam.path" placeholder="菜单路由" @keyup.enter.native="selectPage"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <!--展开/收起-->
                    <el-col :xs="showMoreSearch?24:13" :sm="showMoreSearch?24:7">
                        <div style="float: left;overflow: hidden;"
                             :style="showMoreSearch && { float: 'right', overflow: 'hidden' } || {} ">
                            <el-button size="small" @click="selectPage" type="primary">查询</el-button>
                            <el-button size="small" @click="clearParam">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <!--操作按钮-->
            <div class="mi-container">
                <el-button size="mini" class="mi-item" type="primary" icon="el-icon-plus"
                           @click="show('insert')">新增
                </el-button>
                <el-button size="mini" class="mi-item" type="primary" icon="el-icon-cherry"
                           @click="show('tree')">树形菜单
                </el-button>
                <el-button size="mini" class="mi-item" type="primary" icon="el-icon-refresh"
                           @click="refresh()">
                    更新菜单
                </el-button>
            </div>

            <!--表格数据-->
            <el-table empty-text="当前条件下，暂无匹配数据"
                      :data="tableData"
                      border fit style="width: 100%;"
                      highlight-current-row show-overflow-tooltip
                      @selection-change="selectionChange">
                <!--                <el-table-column type="selection" width="55" align="center"/>-->
                <el-table-column type="index" label="序号" width="80" align="center"/>
                <el-table-column label="菜单名" prop="title" align="center"/>
                <el-table-column label="菜单路由" prop="path" align="center"/>
                <el-table-column label="重定向" prop="redirect" align="center"/>
                <el-table-column label="图标" prop="icon" align="center"/>
                <el-table-column label="排序" prop="sort" align="center"/>
                <el-table-column label="操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button plain size="mini" @click="show('info',scope.row)">
                            详情
                        </el-button>
                        <el-button type="success" plain size="mini" @click="show('update',scope.row)">
                            编辑
                        </el-button>
                        <el-dropdown @command="handleCommand($event,scope.$index, scope.row)" style="margin-left: 10px">
                            <el-button type="primary" plain size="mini">
                                更多<i class="el-icon-arrow-down el-icon--right"/>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="delete"><i class="el-icon-delete"/>删除
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页插件-->
            <Pagination @pagination="selectPage"
                        v-show="pageParam.pages>0"
                        :total-data-num="pageParam.total"
                        :current-page="pageParam.current"
                        :page-size="pageParam.size"/>
        </div>

        <!--编辑（新增/修改）-->
        <transition name="el-fade-in">
            <MenuEdit v-if="showEdit" :data="viewData" :option="viewOption" @close="close"/>
        </transition>

        <!--详情页-->
        <el-drawer size="60%" direction="rtl"
                   :title="this.viewOption.title" :visible.sync="showInfo">
            <MenuInfo v-if="showInfo" :data="viewData" :option="viewOption"/>
        </el-drawer>

        <!--树形菜单-->
        <el-drawer size="60%" direction="rtl"
                   :title="this.viewOption.title" :visible.sync="showTree">
            <MenuTree v-if="showTree" :data="viewData" :option="viewOption"/>
        </el-drawer>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Pagination from "@/components/Pagination/Pagination.vue";
    import Kit from "@/core/mixin/Kit";
    import {infoMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import MenuEdit from "@/views/system/menu/edit.vue";
    import MenuInfo from "@/views/system/menu/info.vue";
    import MenuTree from "@/views/system/menu/tree.vue";
    import {routerList} from "@/core/router/router-const";
    import {compareProps, menuTreeToArray} from "@/core/utils/Utils";

    @Component({
        name: 'MenuList',
        components: {
            Pagination,
            MenuEdit,
            MenuInfo,
            MenuTree,
        },
    })
    export default class MenuList extends mixins(BaseVue, Kit) {
        //切换视图
        showTree = false;

        show(type: any, data: any = {}) {
            //赋值
            this.viewData = data;
            this.viewOption.type = type;
            //详情
            if (type == "info") {
                this.viewOption.title = '菜单详情';
                this.showInfo = true;
            }
            //新增
            if (type == "insert") {
                this.viewOption.title = '新增菜单';
                this.showEdit = true;
                this.showList = false;
            }
            //修改
            if (type == "update") {
                this.viewOption.title = '修改菜单信息';
                this.showEdit = true;
                this.showList = false;
            }
            //展示菜单树
            if (type == "tree") {
                this.viewOption.title = '树形菜单';
                this.showTree = true;
            }

        }

        //视图关闭回调
        close(obj: any = {}) {
            this.showEdit = false;
            setTimeout(() => {
                this.showList = true;
                if (obj.refresh) {
                    this.selectPage();
                }
            }, 200);
        }

        //初始化
        async mounted() {
            this.selectPage();
        }

        //查询分页
        selectPage(page: any = null) {
            this.pageData(API.sysMenuPage, page)
                .then((res: any) => {
                })
        }

        //处理更多按钮事件
        handleCommand(command: any, index: any, row: any) {
            switch (command) {
                case "delete":
                    this.delete(row.id);
                    break;
            }
        }

        delete(id: any) {
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $http.post(API.sysMenuDel, [id]).then((res: any) => {
                    if (res.success) {
                        this.selectPage();
                        successMsg("已删除");
                    }
                });
            }).catch(() => {
                infoMsg("已取消!")
            });
        }


        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        //上传菜单到服务器
        refresh() {
            let newArray: any = [];
            let s = JSON.stringify(routerList);
            let allMenu = menuTreeToArray(JSON.parse(s), []).sort(compareProps('path'));
            for (let menu of allMenu) {
                if (menu.meta.title) menu.title = menu.meta.title;
                if (menu.meta.icon) menu.icon = menu.meta.icon;
                if (menu.meta.affix) menu.affix = menu.meta.affix;
                if (menu.meta.alwaysShow) menu.alwaysShow = menu.meta.alwaysShow;
                if (menu.meta.addTag) menu.addTag = menu.meta.addTag;
                if (menu.meta.breadcrumb) menu.breadcrumb = menu.meta.breadcrumb;
                if (menu.meta.noCache) menu.noCache = menu.meta.noCache;
                if (menu.meta.activeMenu) menu.activeMenu = menu.meta.activeMenu;
                if (menu.meta.hidden) menu.hidden = menu.meta.hidden;
                if (menu.meta.name) menu.name = menu.meta.name;
                if (menu.meta.sort) menu.sort = menu.meta.sort;
                if (menu.meta.buttonParam) menu.buttonParam = menu.meta.buttonParam;
                newArray.push(menu)
            }
            $http.post(API.sysMenuSubmit, newArray)
                .then((res: any) => {
                    if (res.success) {
                        successMsg("操作成功");
                        this.selectPage()
                    }
                });
        }
    }

</script>

<style scoped type="scss">
</style>
